<template>
    <div class="wrapper">
        <ul>
            <li v-for="(item, index) in arr" 
            :key="index"
            :style='{"background-image": "url("+item.src+")"}'>
                <div class="info">
                    <div class="txt">
                        <div class="title">{{item.name}}</div>
                        <p>作者：<span>{{item.author}}</span></p>
                        <p>评分：<span>{{item.rating}}</span> 分</p>
                    </div>
                    <div class="pic">
                        <img :src="item.src">
                    </div>
                </div>
                <div class="desc">{{item.desc}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
import {reviewArray} from '@/assets/data/home-review.js'
export default ({
    name: 'HomeReview',
    data() {
        return {
            arr: reviewArray
        }
    }
})
</script>

<style lang="scss" scoped>
.wrapper {
    ul {
        li {
            width: 100%;
            background-repeat: no-repeat;
            background-position-y: center;
            background-size: cover;
            margin-bottom: 20px;
            padding: 15px;
            box-sizing: border-box;
            border-radius: 10px;
            color: white;
            position: relative;
            overflow: hidden;
            z-index: 1;
            &::before {
                content: "";
                width: 100%;
                height: 280px;
                position: absolute;
                background: inherit;
                top: -5px;
                left: 0;
                z-index: -1;
                filter: blur(5px);
            }
            .info {
                display: flex;
                justify-content: space-between;
                overflow: hidden;
                .txt {
                    width: 60%;
                    flex-shrink: 0;
                    text-shadow: 0 0 5px black;
                    .title {
                        margin: 15px 0;
                        font-size: 20px;
                    }
                    p {
                        font-size: 12px;
                    }
                }
                .pic {
                    width: 100px;
                    height: 150px;
                    flex-shrink: 0;
                    img {
                        width: 100%;
                    }
                }
            }
            .desc {
                margin-top: 15px;
                font-size: 15px;
                display:-webkit-box;
                overflow:hidden;
                text-overflow:ellipsis;
                -webkit-line-clamp:4;
                -webkit-box-orient:vertical;
                text-shadow: 0 0 5px black;
            }
        }
    }
}
</style>